<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>四川营销风云榜</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../../css/elementui.css">
    <link rel="stylesheet" href="../../../css/part/mini.css">

    <style>
        html, body, #app {
            padding: 0;
            margin: 0;
            height: 100%;
        }
        .el-table td, .el-table th {
            text-align: center;
            padding: 8px 0 !important;
        }
        .el-table .success-row {
            background:#b20306!important;
            color:white;
        }
    </style>
</head>
<body>

<div id="app">
    <img width="100%" style="position: fixed" src="../../../img/part/year/monthPre.png">
    <a href="../../portal/navigationYX.html"><img src="../../../img/portal/min.png" id="miniImg"></a>
    <div style="height: 80px">
    </div>
    <div style="margin-bottom: 1%;margin-top: 1%">
        <template>
            <el-select v-model="value" placeholder="请选择" @change="getSaleDeptYearPre">
                <el-option
                        v-for="value in options"
                        :value="value">
                </el-option>
            </el-select>
        </template>
    </div>
    <el-table
            :header-cell-style="{background:'#b20306',color:'white'}"
            :data="tableData"
            border
            center
            height="600px"
    >
        <el-table-column
                padding="8px 0"
                fixed
                prop="saleDeptsName"
                label="机构"
                width="110">
        </el-table-column>
        <el-table-column
                prop="jan"
                label="一月"
                width="70">
        </el-table-column>
        <el-table-column
                prop="feb"
                label="二月"
                width="70">
        </el-table-column>
        <el-table-column
                prop="mar"
                label="三月"
                width="70">
        </el-table-column>
        <el-table-column
                prop="apr"
                label="四月"
                width="70">
        </el-table-column>
        <el-table-column
                prop="may"
                label="五月"
                width="70">
        </el-table-column>
        <el-table-column
                prop="jun"
                label="六月"
                width="70">
        </el-table-column>
        <el-table-column
                prop="jul"
                label="七月"
                width="70">
        </el-table-column>
        <el-table-column
                prop="aug"
                label="八月"
                width="70">
        </el-table-column>
        <el-table-column
                prop="sep"
                label="九月"
                width="70">
        </el-table-column>
        <el-table-column
                prop="oct"
                label="十月"
                width="70">
        </el-table-column>
        <el-table-column
                prop="nov"
                label="十一月"
                width="70">
        </el-table-column>
        <el-table-column
                prop="dec"
                label="十二月"
                width="70">
        </el-table-column>

    </el-table>


</div>
</body>
<script src="../../../js/vue.js"></script>
<script src="../../../js/elementui.js"></script>
<script src="../../../js/axios.js"></script>
<script src="../../../js/head.js"></script>
<script src="../../../js/share.js"></script>

<script>

    new Vue({
        el: "#app",
        data() {
            return {
                tableData: [],
                options: [],
                value: ''
            }
        },
        created() {
            this.getYears();
            setTimeout(() => {
                this.getSaleDeptYearPre();
            }, 200)

        },
        methods: {
            getYears() {
                var myDate = new Date();
                var nowYear = myDate.getFullYear()
                for (var i = 2015; i <= nowYear; i++) {
                    this.options[i - 2015] = i;
                }
                this.value = nowYear;
            },
            getSaleDeptYearPre() {
                axios.get(`/getSaleDeptYearPre?year=${this.value}`).then(response => {
                    this.tableData=response.data;
                    for(var i=0;i<this.tableData.length;i++){
                        this.tableData[i].jan=this.tableData[i].jan==null?'-':this.dataHandle(this.tableData[i].jan);
                        this.tableData[i].feb=this.tableData[i].feb==null?'-':this.dataHandle(this.tableData[i].feb);
                        this.tableData[i].mar=this.tableData[i].mar==null?'-':this.dataHandle(this.tableData[i].mar);
                        this.tableData[i].apr=this.tableData[i].apr==null?'-':this.dataHandle(this.tableData[i].apr);
                        this.tableData[i].may=this.tableData[i].may==null?'-':this.dataHandle(this.tableData[i].may);
                        this.tableData[i].jun=this.tableData[i].jun==null?'-':this.dataHandle(this.tableData[i].jun);
                        this.tableData[i].jul=this.tableData[i].jul==null?'-':this.dataHandle(this.tableData[i].jul);
                        this.tableData[i].aug=this.tableData[i].aug==null?'-':this.dataHandle(this.tableData[i].aug);
                        this.tableData[i].sep=this.tableData[i].sep==null?'-':this.dataHandle(this.tableData[i].sep);
                        this.tableData[i].oct=this.tableData[i].oct==null?'-':this.dataHandle(this.tableData[i].oct);
                        this.tableData[i].nov=this.tableData[i].nov==null?'-':this.dataHandle(this.tableData[i].nov);
                        this.tableData[i].dec=this.tableData[i].dec==null?'-':this.dataHandle(this.tableData[i].dec);
                    }
                })
            },

            dataHandle(_this) {
                var num=Math.round(_this/1000)/10;
                var data = num + "";
                if (data.indexOf(".") != -1) {
                    return data
                }
                return data + ".0" ;
            },
            /*tableRowClassName({
                                  row,
                                  rowIndex
                              }) {

                if (rowIndex == 21) {
                    return 'success-row';
                }
                return '';

            }*/
        }
    })

</script>

</html>